<!DOCTYPE html>
<head>
    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
    <title>PopBox</title>
    <link rel='stylesheet' href='/skins/metronic/global/plugins/jquery-popbox/jquery-popbox.css' type='text/css' media='screen' charset='utf-8'>

</head>
<body>
<h1>PopBox</h1>
<a class='open' href='javascript:void(0)'>
    <img src='plus.png' style='width:14px;position:relative;'> Click Here!
</a>
<div class='popbox'>
    <div class='collapse'>
        <div class='box'>
            <div class='arrow'></div>
            <div class='arrow-border'></div>

            <form action="http://gristmill.createsend.com/t/j/s/nklki/" method="post" id="subForm">
                <p><small>Please complete the form to sign up for the <a href="http://gristmill.io" target="_blank">Gristmill.io</a> mailing list!</small></p>
                <div class="input">
                    <input type="text" name="cm-name" id="name" placeholder="Name" />
                </div>
                <div class="input">
                    <input type="text" name="cm-nklki-nklki" id="nklki-nklki" placeholder="Email" />
                </div>
                <div class="input">
                    <textarea name="cm-f-tlhll" id="Message" placeholder="Comments"></textarea>
                </div>
                <input type="submit" value="Get In Touch" /> <a href="#" class="close">Cancel</a>
            </form>

        </div>
    </div>
</div>

<p>jQuery PopBox is a simple, HighRise inspired balloon UI element.</p>
<script src="/skins/metronic/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="/skins/metronic/global/plugins/jquery-popbox/jquery-popbox.js" type="text/javascript"></script>

<script type='text/javascript' charset='utf-8'>
   $(".open").click(function(){

       $('.popbox').popbox({ $('.popbox'),"open"});
   });


</script>

</body>
</html>